<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>销售主页</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <script src="js/bootstrap.js"></script>
    <script>
        $(function (){
            let user = null;
            let goods = null;
            let pages = 1;
            let current = 0;
            $.ajax({
                    url: "/seller/info",
                    type: "get",
                    success: function (data) {
                        let r = data;
                        if (r.code === 1) {
                            user = r.data
                            $("#id").text(user.id.slice(1))
                            $("#name").val(user.name)
                            $("#address").val(user.address)
                            alert("欢迎登录本商城！")
                        } else {
                            alert(r.msg)
                        }
                    }
                }
            )

            function logout(){
                $.ajax({
                        url: "/seller/logout",
                        type: "post",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {
                                alert(r.data)
                                window.location.href="/backend/login.html"
                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            $("#btnLogout").click(
                function () {
                    logout()
                }
            )

            $("#btnUpdate").click(
                function (){
                    $.ajax({
                            url: "/seller/update",
                            type: "post",
                            data: JSON.stringify({
                                "name": $("#name").val(),
                                "address": $("#address").val()
                            }),
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {
                                let r = data;
                                if (r.code === 1) {
                                    user=r.data
                                    $("#name").val(user.name)
                                    $("#address").val(user.address)
                                    alert("修改成功")
                                } else {
                                    alert(r.msg)
                                }
                            }
                        }
                    )
                }
            )

            $("#btnNew").click(
                function (){
                    window.location.href="/backend/newGoods.html"
                }
            )

            function setBtn(){
                $(".btnUpdateGoods").each(function () {
                    $(this).click(
                        function () {
                            v = $(this).attr("value")
                            tr = $("#"+ v )
                            $.ajax({
                                    url: "/goods/update",
                                    type: "post",
                                    data: JSON.stringify({
                                        "id": v,
                                        "price": parseInt((tr.find(".price").val()*100).toString()),
                                        "intro": tr.find(".intro").val(),
                                        "name": tr.find(".name").val(),
                                        "count": parseInt(tr.find(".count").val().toString())
                                    }),
                                    contentType: "application/json",
                                    dataType: "json",
                                    success: function (data) {
                                        let r = data
                                        if (r.code === 1) {
                                            if(parseInt(tr.find(".count").val().toString())>=0){
                                                tr.find(".stat").text("在售")
                                            }
                                            else{
                                                tr.find(".stat").text("已下架")
                                            }
                                            alert(r.data)
                                        }
                                        else {
                                            alert(r.msg)
                                        }
                                    },
                                    error: function () {
                                        alert("无响应")
                                    }
                                }
                            )
                            photo = tr.find(".photo")[0]
                            if(photo.files.length>0){
                                if(photo.files[0].size>1024*1024*3){
                                    alert("图片不能超过3m！")
                                    return;
                                }
                                let form = new FormData();
                                form.append("file", photo.files[0]);
                                form.append("id", v);
                                $.ajax({
                                        url: "/goods/upLoadPhoto",
                                        type: "post",
                                        data: form,
                                        processData: false,
                                        contentType: false,
                                        dataType: "json",
                                        success: function (data) {
                                            let r = data;
                                            if (r.code === 1) {
                                                tr.find(".img").attr("src", "/photo/"+r.data)
                                                alert("图片更新")
                                                tr.find(".photo").val(null)
                                            } else {
                                                alert(r.msg)
                                            }
                                        }
                                    }
                                )
                            }
                        }
                    );
                })

                $(".btnDownGoods").each(function () {
                    $(this).click(
                        function () {
                            v = $(this).attr("value")
                            tr = $("#"+ v )
                            $.ajax({
                                    url: "/goods/down",
                                    type: "post",
                                    data: JSON.stringify({
                                        "id": v
                                    }),
                                    contentType: "application/json",
                                    dataType: "json",
                                    success: function (data) {
                                        let r = data
                                        if (r.code === 1) {
                                            alert(r.data)
                                            tr.find(".stat").text("已下架")
                                            tr.find(".count").val(-1)
                                        }
                                        else {
                                            alert(r.msg)
                                        }
                                    },
                                    error: function () {
                                        alert("无响应")
                                    }
                                }
                            )
                        }
                    );
                })
                $(".btnGoodsOrder").each(function (){
                    $(this).click(
                        function (){
                            window.localStorage.setItem("goodsid", $(this).attr("value"))
                            window.location.href = "/backend/goodsOrder.html"
                        }
                    )
                })
            }

            function getPage(pageNum){

                if(pageNum<=0||pageNum>pages){
                    return
                }

                let table = $("#goodsTable")
                table.empty()
                goods = null

                $.ajax({
                        url: "/goods/page",
                        type: "post",
                        data: JSON.stringify({
                            "pageNum": pageNum,
                        }),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {

                                pages = r.data.pages
                                $("#pageNum").attr("max", pages)

                                current = r.data.current
                                if(pages<=0){
                                    current=0
                                }

                                $("#pageNum").val(current)

                                goods = r.data.records

                                if(current<=1){
                                    $("#btnLast").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnLast").parent("li").removeClass("disabled")
                                }

                                if(current>=pages){
                                    $("#btnNext").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnNext").parent("li").removeClass("disabled")
                                }

                                for (let i = 0; i < goods.length; i++) {
                                    let good = goods[i]
                                    let stat = "已下架"
                                    if(good.count>=0){
                                        stat = "在售"
                                    }
                                    table.append(
                                        "<tr id='" + good.id + "'>"+
                                        "<td><input class='name' type='text' name='name' value='" + good.name+ "'></td>"+
                                        "<td><input class='price' type='number' name='price' value='" + good.price/100+ "'></td>"+
                                        "<td><label>" + good.sold + "件</label></td>"+
                                        "<td><input class='count' type='number' name='count' value='" + good.count+ "'></td>"+
                                        "<td><input class='intro' type='text' name='intro' value='" + good.intro+ "'></td>"+
                                        "<td><label>" + good.unsend +"</label></td>"+
                                        "<td><img class='img' src='/photo/" + good.photo + "' width='50' height='50'></td>"+
                                        "<td><input class='photo' type='file' accept='image/*'></td>"+
                                        "<td>" +
                                        "<button class='btnUpdateGoods btn-primary' value='" + good.id + "'>更新</button>" +
                                        "<button class='btnDownGoods btn-danger' value='" + good.id + "'>下架</button>" +
                                        "<button class='btnGoodsOrder btn-info' value='" + good.id + "'>销售状态</button>" +
                                        "</td>"+
                                        "<td><label class='stat'>" + stat +"</label></td>"+
                                        "</tr>"
                                    )
                                }

                                setBtn()

                                $("#labelPage").text("     共 "+pages+" 页，当前第 "+current+" 页，跳转到")
                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            $("#btnShow").click(
                function (){
                    $(".headMenu").find("li").removeClass("active")
                    $(this).parent().addClass("active")
                    if(pages==0){
                        pages=1
                    }
                    getPage(1)
                    $("#infoBox").hide()
                    $("#goodsBox").show()
                }
            )

            $("#btnLast").click(
                function (){
                    getPage(current-1)
                }
            )

            $("#btnNext").click(
                function (){
                    getPage(current+1)
                }
            )

            $("#btnPage").click(
                function (){
                    getPage($("#pageNum").val())
                }
            )

            $("#btnInfo").click(
                function (){
                    $(".headMenu").find("li").removeClass("active")
                    $(this).parent().addClass("active")
                    $("#infoBox").show()
                    $("#goodsBox").hide()
                }
            )

            $("input").attr("autocomplete", "off")
        })
    </script>
</head>
<body>

    <ul class="nav nav-tabs headMenu">
        <li role="presentation" class="active"><a id="btnInfo">商店信息</a></li>
        <li role="presentation"><a id="btnShow">查看商品</a></li>
        <li role="presentation"><a id="btnNew">新建商品</a></li>
        <li><a id="btnLogout" class="text-danger">登出</a></li>
    </ul>

    <div class="table-responsive" id="infoBox">
        <div class="page-header">
            <h3>
                商店信息
            </h3>
        </div>
        <table class="table table-bordered table-striped">
            <tr>
                <th>id</th>
                <td>
                    <label id="id"></label>
                </td>
            </tr>
            <tr>
                <th>姓名</th>
                <td>
                    <input id="name" type="text">
                </td>
            </tr>
            <tr>
                <th>地址</th>
                <td>
                    <input id="address" type="text">
                </td>
            </tr>
            <tr>
                <th>操作</th>
                <td>
                    <button id="btnUpdate" class="btn-primary">修改</button>
                </td>
            </tr>
        </table>
    </div>

    <div id="goodsBox" class="table-responsive" hidden>
        <div class="page-header">
            <h3>
                商品列表
            </h3>
        </div>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <td>商品名</td>
                    <td>价格</td>
                    <td>销量</td>
                    <td>库存</td>
                    <td>介绍</td>
                    <td>未处理订单数</td>
                    <td>图片</td>
                    <td>上传图片</td>
                    <td>操作</td>
                    <td>状态</td>
                </tr>
            </thead>
            <tbody id="goodsTable">

            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination" id="goodsPage">
                <li>
                    <a aria-label="Previous" id="btnLast">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" id="btnNext">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li style="display: inline">
                    <label for="pageNum" id="labelPage"></label>
                    <input type="number" id="pageNum" min="0" max="1" value="1">
                    <button type="button" class="btn btn-primary btn-xs" id="btnPage">跳转</button>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>